<template>  
  <div ref="canvas"></div>  
</template>  
  
<script>  
import { onMounted, ref, watch, toRefs } from 'vue';  
  
export default {  
  props: {  
    bgColor: {  
      type: String,  
      default: '#ffffff'  
    },  
    textColor: {  
      type: String,  
      default: '#000000'  
    },  
    fontSize: {  
      type: Number,  
      default: 24  
    },  
    opacity: {  
      type: Number,  
      default: 1,  
      validator(value) {  
        return value >= 0 && value <= 1;  
      }  
    }  
  },  
  setup(props) {  
    const { bgColor, textColor, fontSize, opacity } = toRefs(props);  
    const canvas = ref(null);  
  
    onMounted(() => {  
      const ctx = canvas.value.getContext('2d');  
  
      // 绘制背景  
      ctx.fillStyle = bgColor.value;  
      ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);  
  
      // 绘制文本（假设文本内容和位置是固定的）  
      ctx.font = `${fontSize.value}px sans-serif`;  
      ctx.fillStyle = textColor.value;  
      ctx.globalAlpha = opacity.value; // 设置透明度  
      ctx.fillText('Hello, Vue 3!', 50, 50);  
    });  
  
    // 如果需要监听 props 变化并重新绘制，可以使用 watch  
    watch([bgColor, textColor, fontSize, opacity], () => {  
      // 清除画布并重新绘制  
      const ctx = canvas.value.getContext('2d');  
      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);  
      // ...重新绘制的代码（与上面 onMounted 中的相同）  
    }, { deep: true });  
  
    return { canvas };  
  }  
};  
</script>  
  
<style scoped>  
canvas {  
  border: 1px solid black;  
  /* 设置你想要的 canvas 尺寸 */  
  width: 300px;  
  height: 200px;  
}  
</style>